<template>
  <div>
    <van-nav-bar title="编辑玩家角色" left-arrow @click-left="onClickLeft" />

    <van-cell-group>
      <van-field
        v-model="player.角色名"
        label="角色名"
        placeholder="提示性文字"
      />
      <van-field
        v-model="player.角色职业"
        label="职业"
        placeholder="提示性文字"
      />
      <van-field
        v-model="player.头发颜色"
        label="头发颜色"
        placeholder="提示性文字"
        @click="readyPick('头发颜色')"
      />
      <van-field
        v-model="player.眼镜颜色"
        label="眼镜颜色"
        placeholder="提示性文字"
        @click="readyPick('眼镜颜色')"
      />
      <van-field
        v-model="player.皮肤颜色"
        label="皮肤颜色"
        placeholder="提示性文字"
        @click="readyPick('皮肤颜色')"
      />
    </van-cell-group>
    <van-cell>
      假装这里有个Q版小人
    </van-cell>
    <van-cell>
      <van-button type="primary" block>创建/提交修改</van-button>
    </van-cell>

    <van-popup v-model="pickShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="colors"
        @cancel="pickShow = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'name',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      pickTar: '',
      pickShow: false,
      colors: (() => {
        return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
      })(),
      player: {
        角色名: '',
        角色职业: '',
        头发颜色: 0,
        眼镜颜色: 0,
        皮肤颜色: 0,
        力量值: 0,
        智力值: 0,
        敏捷值: 0,
        耐力值: 0,
        初始生命值: 0,
        初始魔法值: 0,
      },
    };
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    onClickLeft: function() {
      this.$router.back(-1);
    },
    test: function() {
      console.log('test');
    },
    formatWeb2api: function(item) {
      let _ = this._;
      let f = this.player;
      return {
        users_Role_Id: _.get(f, '角色Id'),
        user_Id: _.get(f, ''),
        role_Name: _.get(f, '角色名', ''),
        role_Sex: _.get(f, '角色性别'),
        role_Head_Img: _.get(f, '角色头像', ''),
        role_Birth_Place: _.get(f, '出生地'),
        addTime: null,
        editTime: null,
      };
    },
    formatApi2web: function(item) {
      let _ = this._;
      return {
        角色Id: _.get(item, 'users_Role_Id', ''),
        userID: _.get(item, 'user_Id', ''),
        角色名字: _.get(item, 'role_Name', ''),
        角色性别: _.get(item, 'role_Sex', 0), //[-1=无，0=女，1=男]
        角色头像: _.get(item, 'role_Head_Img', ''),
        出生地: _.get(item, 'role_Birth_Place', ''),
        入库时间: _.get(item, 'addTime', ''),
        编辑时间: _.get(item, 'editTime', ''),
        //以上是接口提供的部分

        眼睛颜色: _.get(item, 'color_eye', ''),
        头发颜色: _.get(item, 'color_hair', ''),
        皮肤颜色: _.get(item, 'color_skin', ''),
      };
    },
    readyPick: function(tar) {
      this.pickShow = true;
      this.pickTar = tar;
    },
    onConfirm: function(e) {
      console.log(e);
      this.pickShow = false;
      this.player[this.pickTar] = e;
    },
    formatData: function() {
      // this.player
    },
    ajaxData: function() {},
  },
};
</script>
<style lang="less" scoped></style>
